<template>
  <section class="page-container">
    <ul class="icon-list">
      <li 
        v-for="(Icon, key) in icons" 
        :key="key" 
        class="icon-list__item">
          <span class="icon-list__icon">
            <component :is="Icon"/>
            <span class="icon-list__icon-name">
              {{Icon.name}}
            </span>
          </span>
      </li>
    </ul>

    <!-- <span style="color: red;">
      <component :is="`MaIconOrgStru`" style="width: 80px; height: 80px;"/>
    </span> -->
  </section>
</template>

<script lang="ts" setup>
import { icons } from 'hive-icons-vue/global'
</script>

<style scoped>
.icon-list {
  margin: 12px;
  overflow: hidden;
  list-style: none;
  padding: 0 !important;
  border-top: 1px solid #dcdfe6;
  border-left: 1px solid #dcdfe6;
  border-radius: 4px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}
.icon-list__item {
  text-align: center;
  height: 90px;
  font-size: 14px;
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  transition: background-color 0.3s;
}
.icon-list__item:hover {
  background-color: #f2f6fc;
}
.icon-list__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  cursor: pointer;
  color: #9AA6B8;
  font-size: 40px;
}
/* .icon-list__icon-svg {
  width: 40px;
  height: 40px;
} */
.icon-list__icon-name {
  margin-top: 8px;
  font-size: 12px;
}
</style>
